iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
0
自我挑戰組

恢復記憶並更上一層樓的前端學習記錄系列 第 1

[HTML]恢復記憶之以前沒學好(一):<Table>

  • 分享至 

  • xImage
  •  

關於以前沒學好系列

二十多年前靠著看書自己亂寫大致知道了HTML跟簡單的CSS在幹嘛,但是有很多概念性的東西一直沒有弄清楚。藉著各種網路課程資料以及家教(老公)指點,最近複習起來開始有一些「喔!原來是這樣!」的恍然大悟感。藉此筆記一下。

關於Table標籤

這是個以前做簡單網頁排版時很好用的技巧,主要是兩層東西:
tr: Table-Row 橫列
td: Table-Data 個別儲存格

(PS. 我不好意思承認過了二十年才知道標籤名字的來源)

<table>
    <tr>
        <td>第一列左一</td>
        <td>第一列左二</td>   
    </tr>
    <tr>
        <td>第二列左一</td>
        <td>第二列左二</td>
    </tr>
<table>

其中td是該層tr內從左到右順序排列的
Table可以做巢狀結構,表格內包表格,當然是包在td裡面的

另外,Table還有THead,TBody,TFoot這些衍生的標籤
表頭、表身、表尾這樣
其中THead裡面的個別儲存格,叫做th,不是td
以便跟表身的儲存格資料區分
這個我以前也從來沒有搞清楚過

MDN建議了關於Table標籤的棄用屬性,像是對齊、背景顏色這些樣式屬性
這次主要學習到的,就是應當分開「結構」與「樣式」以維持清晰的內容


下一篇
[HTML]恢復記憶之以前沒學好(二):<FORM>
系列文
恢復記憶並更上一層樓的前端學習記錄2
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言